@extends('admin.base')
@section('title', '其余主图')
@section('content')
    <style>
        #demo2 img {
            width: 100px;
            margin-left: 20px;
        }
    </style>

    <div class="layui-card">
        <fieldset class="layui-elem-field">
            <div class="layui-field-box">
                    <span class="layui-breadcrumb">
                      <a href="/admin/home">首页</a>
                      <a href="/admin/shop/index?page={{$request->page}}&keywords={{$request['keywords']}}&label={{$request['label']}}&type={{$request['type']}}&brand={{$request['brand']}}&state={{$request['state']}}&sell={{$request['state']}}&sell={{$request['sell']}}&month={{$request['month']}}&title={{$request->title}}">商品列表</a>
                      <a href="">{{$gname}} - 轮播图</a>
                    </span>
                <span class="pull-right">
                        <button class="layui-btn layui-btn-sm"
                                onclick="active('{{url('admin/shop/source_add')}}',{{$id}},'添加','800px','600px');">
                            <i class="layui-icon">&#xe608;</i> 添加
                        </button>
                    </span>
            </div>
        </fieldset>

        <blockquote class="layui-elem-quote layui-quote-nm">
            商品名: {{$gname}}
        </blockquote>

        <fieldset class="layui-elem-field">
            <div class="layui-field-box">
                @if($list->isEmpty())
                    该商品还没有添加其余主图
                @else
                    @foreach($list as $vo)
                        <div style="cursor: pointer;margin-left:10px;display:inline-block;padding:2px 4px;">
                            <div style="color:black;text-align:right"
                                 onclick="del('{{url('admin/shop/pic_del')}}','{{$vo->id}}');"><i class="layui-icon">&#x1007;</i>
                            </div>
                            <a href="{{$vo['picname']}}" target="_blank"><img src="{{$vo['picname']}}"
                                                                              style="width:200px;"></a>
                        </div>
                    @endforeach
                @endif
            </div>
        </fieldset>

        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" method="post" enctype="multipart/form-data">
                <input type="hidden" name="gid" value="{{$id}}">
                {{--<div class="layui-form-item">--}}
                {{--<!-- <label class="layui-form-label">规格名</label> -->--}}
                {{--<label class="layui-form-label">图片</label>--}}
                {{--<button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>--}}
                {{--<input type="hidden" name="picname" id="picname">--}}
                {{--</div>--}}
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                    <input type="hidden" name="picname" id="picname">
                </div>
                <div class="layui-form-item">
                    <!-- <div class="layui-input-block"> -->
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <!-- </div> -->
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript">
        layui.use('form', function () {
            var form = layui.form;
            form.render();

            layui.use('upload', function () {
                var $ = layui.jquery
                    , upload = layui.upload;
                //指定允许上传的文件类型
                // upload.render({
                //     elem: '#test3'
                //     ,url: '/admin/goods_up' //改成您自己的上传接口
                //     ,accept: 'file' //普通文件
                //     ,done: function(res){
                //         layer.msg(res.msg);
                //         if(res.code == 1){
                //             $("#test3").text('上传成功!'+res.data);
                //             $("#picname").val(res.info);
                //         }
                //     }
                // });
                //多图片上传
                upload.render({
                    elem: '#test2'
                    , url: '/admin/goods_up' //改成您自己的上传接口
                    , multiple: true
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                        });
                    }
                    , done: function (res) {
                        layer.msg(res.msg);
                        //上传完毕
                        if (res.code == 1) {
                            $("#test3").text('上传成功!' + res.data);
                            var picname = $("#picname").val();
                            $("#picname").val(picname + res.info + ',');
                        }
                    }
                });
            });


            //绑定提交
            form.on('submit(formDemo)', function (data) {
                layer.confirm('确认执行此操作？', {icon: 3, title: '提示'}, function (index) {
                    ajax("{{url('admin/shop/pic_add')}}", data.field, function (data) {
                        layer.close();
                        layer.closeAll();
                        layer.msg(data.msg);
                        if (data.code == 1) {
                            location.href = location.href;
                        }
                    });
                });
                return false;
            });
        });

    </script>
@endsection